<template>
  <div>
    <el-dialog :title="'流程部署文件上传'" :visible.sync="dialogVisible" width="850px" :close-on-click-modal="false">
      <el-form ref="form" class="form-wrap" :rules="rules" :model="formData">
        <el-form-item label="选择流程定义bpmn文件、再选择流程定义png文件：" class="full">
          <div class="mb20">
            <el-upload
              action="/admin/sys-file/upLodeFileAdd"
              name="myfiles"
              ref="uploadFile"
              multiple
              :limit="2"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-change="changeFiles"
              :on-exceed="handleExceed"
              :auto-upload="false"
              :file-list="fileList"
              accept=".bpmn, .png"
            >
              <el-button size="small" type="primary">点击上传文件</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="部署流程名称：" class="full" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" placeholder="请输入部署流程名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" v-throttle="[save]">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchImport } from "@/views/wy-flow/api/actreprocdef";
import dbl from '@/utils/dbl'

export default {
  name: "gap-data",
  data () {
    return {
      dialogVisible: false,
      myHeader: { Authorization: dbl.get('token') },
      isEdit: false,
      fileList: [],
      formData: {
        remarks: "",
      },
      rules: {
        remarks: [{ required: true, message: '请输入部署流程名称', trigger: 'blur' }],
      },
      headers: '',
    }
  },

  methods: {
    show (data) {
      this.fileList = []
      this.formData = {}
      this.dialogVisible = true
      this.isEdit = false
      this.form.fileList = [];
      setTimeout(() => {
        this.$refs['edit-form'].resetFields()
        if (data) {
          this.isEdit = true
          let form = {}
          this.form = Object.keys(this.form).forEach(key => {
            form[key] = data[key]
          })
          this.form = form
        }
      }, 100)
    },
    changeFiles (file, fileList) {
      this.fileList = fileList
    },
    handlePreview (file) {
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove (file, fileList) {
      this.fileList = fileList;
    },
    uploadSuccess (response, file, fileList) {
      let fileName = file.name;
      let filePath = file.response.data[0].path;
      let files = { name: "", path: "" };
      files.name = fileName;
      files.path = filePath;
      this.form.fileList.push(files);
    },
    save () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '数据处理中'
          });
          let formData = new FormData();
          formData.append('remarks', this.formData.remarks);
          for (let i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].raw != null) {
              formData.append('myfiles', this.fileList[i].raw)
            }
          }
          batchImport(
            formData
          ).then(
            response => {
              if (response.data.code == 0) {
                this.$message.success('添加成功')
                this.$emit('loadsuc');
                this.dialogVisible = false
              } else {
                this.$alert("服务端异常：" + response.message);
              }
              loading.close()
            }
          ).catch(reason => {
            this.$message.error('添加失败')
            loading.close()
          }
          );
        }
      })
    }
  }
}
</script>

<style  lang='scss'>
@include formWrap(4);
</style>

